<template>
  <div v-if="isVirtual">
    虚拟列表
    <virtual-scroll-list
      class="vsl"
      item-key-field="id"
      :data="scrollData"
      :keeps="20"
      :item-comp="testVslList"
    >
      
    </virtual-scroll-list>
  </div>
  <div v-else>
    普通列表
    <div class="vsl">
      <testVslList
        :height="100"
        v-for="(item, i) in scrollData"
        :data="item"
        :key="item.id + i"
      ></testVslList>
    </div>
  </div>
</template>

<script setup lang="ts">
import virtualScrollList from '@greaclar-ui/components/virtual-scroll-list';
import testVslList from './test-vsl-list.vue';
const isVirtual = true;
type Item = {
  id: string;
  name: string;
  desc: string;
  index: number;
};
function createListData(total: number) {
  // 生成随机字符串的函数
  function randomString(len: number) {
    const $chars =
      'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678生成随机长度的中文随机字符串的函数ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678生成随机长度的中文随机字符串的函数';
    const maxPos = $chars.length;
    let pwd = '';
    for (let i = 0; i < len; i++) {
      pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd.slice(0, len * Math.random());
  }
  const list: Item[] = Array(total).fill(null as unknown as Item);
  return list.map((_, index) => {
    return {
      id: randomString(6) + index,
      name: index + randomString(3),
      desc: index + randomString(100),
      index: index
    };
  });
}

const scrollData = createListData(2000);
</script>
<style scoped lang="scss">
.vsl {
  width: 500px;
  height: 300px;
  overflow: auto;
  border: 1px solid #cc8c8c;
}
</style>
